<template>
  <div class="hello">
    组件A01（子组件）：<br>
    <div class="kuang" >
      模板里获取全局状态：<br>
      <template v-for="(item, key, index) in $state" :key="'aa' + index">
      {{key}}:<br>
      <template v-for="(item, key, index) in item" :key="'aa1' + index">
          &nbsp;&nbsp;{{key}}:{{item}}<br>
      </template><br><br>
      </template>
    </div>
    <div class="kuang" >
      子组件获取局部状态：<br>
      <template v-for="(item, key, index) in state" :key="'aa' + index">
      {{key}}:<br>
      <template v-for="(item, key, index) in item" :key="'aa1' + index">
          &nbsp;&nbsp;{{key}}:{{item}}<br>
      </template><br><br>
      </template>
    </div>
    <div style="clear:both"></div>

    <input type="button" @click="myClick" value="子组件修改局部状态"/>
    <div style="clear:both"></div>
  </div>
</template>

<script>
import Vueds from '../../packages/vue-data-state'

// 演示一下状态的使用
export default {
  name: 'com-a-01',
  props: {
    msg: String
  },
  setup() {
    // 获取局部状态
    const { get } = Vueds.useStore()

    const state = get.localState()

    const myClick = () => {
      state.page.pageIndex += 1
      console.log(state)
    }

    return {
      state,
      myClick
    }
  }
}
</script>
